<template>
    <div class="h-600px">
      <Editor v-model="contentHtml" @savePublic="savePublic"></Editor>
    </div>
  </template>
  
  <script setup>
  import Editor from "@/components/vueQuillEditor.vue";
  import { addfile } from "@/api/serveFile/index";
  import { useUserStore } from "@/store/user"; // 用户信息
  const { proxy } = getCurrentInstance();
  const contentHtml = ref("");
  const userStore = useUserStore();
  
  const title = ref(""); // 文章标题，建议外部输入
  const coverUrl = ref(""); // 封面图片，建议外部上传
  const categoryId = ref(""); // 分类ID，建议外部选择
  const tags = ref([]); // 标签，建议外部输入
  
  const savePublic = async ({ blobFileMap, publishType }) => {
    const realHtml = await handleOriginHtml(contentHtml.value, blobFileMap);
  
    // 组装文章入库参数
    const params = {
      // 标题
      title: title.value, // 由外部输入
  
      // 摘要，可自动截取正文前N字
      summary: realHtml.replace(/<[^>]+>/g, "").slice(0, 100), // 取前100字
  
      // 正文内容
      content: realHtml,
  
      // 封面图片
      cover_url: coverUrl.value, // 由外部上传
  
      // 发布类型
      publish_type: publishType, // public/private/draft
  
      // 作者ID
      author_id: userStore.user_info?.id || userStore.user_info?.userId || "", // 兼容不同后端字段
  
      // 作者昵称
      author_name: userStore.user_info?.userName || userStore.user_info?.name || "", // 兼容不同后端字段
  
      // 文章内所有图片URL
      image_urls: (() => {
        const imgReg = /<img[^>]+src=\"([^">]+)\"/g;
        let match;
        const urls = [];
        while ((match = imgReg.exec(realHtml))) {
          urls.push(match[1]);
        }
        return urls;
      })(),
  
      // 分类ID
      category_id: categoryId.value, // 由外部选择
  
      // 标签
      tags: tags.value, // 由外部输入
  
      // 置顶
      is_top: 0, // 默认不置顶
  
      // 状态
      status: publishType,
  
      // 创建时间、更新时间、发布时间，后端生成
      created_at: "", // 后端生成
      updated_at: "", // 后端生成
      published_at: "", // 后端生成
  
      // 预留扩展字段
      extra: {},
  
      // 浏览量、点赞数、评论数，后端生成
      view_count: 0,
      like_count: 0,
      comment_count: 0,
    };
  
    console.log("文章入库参数：", params);
    // TODO: 调用文章新增接口
  };
  async function handleOriginHtml(originHtml,blobFileMap) {
    return new Promise(async (resolve, reject) => {
      try {
        let html = originHtml;
        // 匹配所有 blob 图片
        const imgReg = /<img[^>]+src="([^">]+)"/g;
        let match;
        const uploadPromises = [];
        const urlMap = new Map();
  
        while ((match = imgReg.exec(html))) {
          const src = match[1];
          console.log(src,"src");
          if (src.startsWith("blob:") && blobFileMap.has(src)) {
            const file = blobFileMap.get(src);
            const formData = new FormData();
            formData.append("file", file);
            formData.append("fileType", Number(proxy.$gf.gft(file.name).value));
            formData.append("remark", "文章图片");
            formData.append("spaceId", "521634973787096064");
            //521634973787096064代表文件服务空间：存储桶一
            const p = addfile(formData, {
              spaceId: "521634973787096064",
            }, (val) => {
              console.log(`文件---[${file.name}]---上传进度${val}`);
            }).then((res) => {
              urlMap.set(src, res.fileUrl);
            });
            uploadPromises.push(p);
          }
        }
  
        await Promise.all(uploadPromises);
  
        // 替换 html 中的 blob 地址为服务器地址
        urlMap.forEach((serverUrl, blobUrl) => {
          html = html.replaceAll(blobUrl, serverUrl);
        });
        resolve(html);
      } catch (error) {
        resolve("你好")
      }
    })
  }
  </script>
  
  <style lang="scss" scoped></style>